<template>
  <a-modal
    title="修改绑定手机号"
    centered
    v-model="visible"
    @ok="handle"
  >
    <a-form :form="form">
      <a-alert v-if="isLoginError" type="error" showIcon style="margin-bottom: 24px;" message="验证码错误或手机号未注册" />
      <a-form-item>
        <a-input size="large" type="text" placeholder="新的手机号码" v-decorator="['telephone', {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号' }], validateTrigger: 'change'}]">
          <a-icon slot="prefix" type="mobile" :style="{ color: 'rgba(0,0,0,.25)' }"/>
        </a-input>
      </a-form-item>

      <a-row :gutter="16">
        <a-col class="gutter-row" :span="16">
          <a-form-item>
            <a-input size="large" type="text" placeholder="验证码" v-decorator="['captcha', {rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'blur'}]">
              <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="8">
          <a-button
            class="getCaptcha"
            tabindex="-1"
            :disabled="state.smsSendBtn"
            @click.stop.prevent="captcha"
            v-text="!state.smsSendBtn && '获取验证码' || (state.time+' s')"
          ></a-button>
        </a-col>
      </a-row>
    </a-form>
  </a-modal>
</template>

<script>
import { editPhone, getCaptcha } from '@/api/setting'

export default {
  data () {
    return {
      form: this.$form.createForm(this),
      id: this.$store.getters.userInfo.id,
      visible: false,
      state: {
        time: 60,
        smsSendBtn: false
      }
    }
  },
  methods: {
    show () {
      this.visible = !this.visible
    },
    handle (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          const phone = this.form.getFieldValue('telephone')
          const captcha = this.form.getFieldValue('captcha')
          editPhone(this.id, phone, captcha).then(res => {
            this.show()
            this.$router.go(0)
          })
        }
      })
    },
    captcha (e) {
      e.preventDefault()
      this.form.validateFields(['telephone'], { force: true }, (err, values) => {
        if (!err) {
          this.state.smsSendBtn = true
          const interval = window.setInterval(() => {
            if (this.state.time-- <= 0) {
              this.state.time = 60
              this.state.smsSendBtn = false
              window.clearInterval(interval)
            }
          }, 1000)
          getCaptcha(this.form.getFieldValue('telephone')).then(res => {
            this.$notification['success']({
              message: '提示',
              description: '验证码获取成功，您的验证码为：' + res.result.captcha,
              duration: 8
            })
          }).catch(err => {
            clearInterval(interval)
            this.state.time = 60
            this.state.smsSendBtn = false
            this.requestFailed(err)
          })
        }
      })
    }
  }
}
</script>

<style>
.getCaptcha {
    display: block;
    width: 100%;
    height: 40px;
  }
</style>
